<template>
  <div class="threeJS"></div>
</template>

<script>
  import * as THREE from "three";
  import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"

  export default {
    name: "dos",
    components: {},
    data() {
      return {

      }
    },

    mounted() {
      this.init();
    },

    methods: {
      init() {
        this.scene = new THREE.Scene();
        this.div = document.querySelector(".threeJS");
        this.width = this.div.clientWidth;
        this.height = this.div.clientHeight;
        // this.initGeometry();
        this.initLight();
        this.initCamera();
        this.initRenderer();
        this.ininLoader();
        this.render();
      },

      // 创建几何结构
      initGeometry() {
        // 线
        let geometry = new THREE.Geometry();
        let material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
        let color = new THREE.Color(0xff0000);
        geometry.vertices.push(
          new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(100, 0, 0),
        );
        geometry.colors.push(color);
        let line = new THREE.Line(geometry, material);
        this.scene.add(line);

        // 矩形 渐变
        // let geometry = new THREE.PlaneGeometry(200, 200, 2, 3);
        // let material = new THREE.MeshBasicMaterial({
        //   vertexColors: THREE.VertexColors,
        //   wireframe: true,   // 是否以线框绘制
        // });
        // let faces = geometry.faces;
        // let color1 = new THREE.Color(0x00900f);
        // let color2 = new THREE.Color(0x049f0f);
        // let color3 = new THREE.Color(0x0900ff);
        // for (let i = 0; i < faces.length; i++) {
        //   let index = faces[i];
        //   index.vertexColors[0] = color1;
        //   index.vertexColors[1] = color2;
        //   index.vertexColors[2] = color3;
        // }
        // let mesh = new THREE.Mesh(geometry, material);
        // this.scene.add(mesh);


        // 三角形
        // let geometry = new THREE.Geometry();
        // let material = new THREE.MeshBasicMaterial({
        //   vertexColors: THREE.VertexColors,
        //   wireframe: false
        // });
        // let color1 = new THREE.Color(0x00900f);
        // let color2 = new THREE.Color(0x049f0f);
        // let color3 = new THREE.Color(0x0900ff);
        // geometry.vertices.push(
        //   new THREE.Vector3(100, 0, 0),
        //   new THREE.Vector3(0, 100, 0),
        //   new THREE.Vector3(-100, 0, 0)
        // );
        //
        // let face = new THREE.Face3(0, 1, 2);
        // face.vertexColors[0] = color1;
        // face.vertexColors[1] = color2;
        // face.vertexColors[2] = color3;
        // geometry.faces.push(face);
        // let mesh = new THREE.Mesh(geometry, material);
        // this.scene.add(mesh);
      },

      ininLoader() {
        let _this = this;
        let filePath = "/static/module/";
        let objLoader = new OBJLoader().setPath(filePath);

        let group = new THREE.Group();
        objLoader.load('Cerberus.obj', function ( object ) {
          object.scale.multiplyScalar(200);    // 缩放模型大小

          _this.scene.add( object );

          let box = _this.creatBoundingBox(object);
          console.log(box);
          // group.box = box;
          // addDom("楼宇名称  ", "XXX大厦", "占地面积：25541平方米" , box);
          // CubeArray.push(box);
        })
      },


      // 生成模型包围盒实体，方便标签判断位置
      creatBoundingBox(object) {
        //计算包围盒长宽高
        let Box = new THREE.Box3();
        Box.setFromObject(object);
        if ( Box.isEmpty() ) return;
        let min = Box.min;
        let max = Box.max;
        let width = max.x - min.x;
        let height = max.y - min.y;
        let deepth = max.z - min.z;

        //计算包围盒中心点
        let centerX = (max.x + min.x) / 2;
        let centerY = (max.y + min.y) / 2;
        let centerZ = (max.z + min.z) / 2;

        //画一个boundingbox的cube实体
        let boxGeometry = new THREE.BoxGeometry(width, height, deepth);
        let boxMaterial = new THREE.MeshLambertMaterial({});
        let box = new THREE.Mesh(boxGeometry, boxMaterial);
        box.position.set(centerX, centerY, centerZ);
        return box;
      },


      // 创建光源
      initLight() {
        // 平行光
        var point = new THREE.DirectionalLight(0xc29e5e);
        point.position.set(0, 400, 100);
        this.scene.add(point);

        // 环境光 颜色设置为`0xffffff`,强度系数设置为0.5
        var ambient = new THREE.AmbientLight(0xd9b26e, 0.06);
        this.scene.add(ambient);
      },

      // 创建相机
      initCamera() {
        var k = this.width / this.height;
        var s = 300; // 三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000); // 正投影相机
        this.camera = camera;
        camera.position.set(800, 800, 800);
        camera.lookAt(this.scene.position);
      },

      // 创建渲染器对象
      initRenderer() {
        // antialias  渲染器是否需要高质量渲染（高质量渲染没有锯齿，如果数据量大可以改为 false）
        var renderer = new THREE.WebGLRenderer({ antialias: false });
        this.renderer = renderer;
        renderer.setSize(this.width, this.height);   // 设置渲染区域尺寸
        renderer.setClearColor(0xf0f0f0, 1);
        this.div.appendChild(renderer.domElement);
      },

      // 渲染模型
      render() {
        this.renderer.render(this.scene, this.camera);
        requestAnimationFrame(this.render);
      },
    }
  }
</script>

<style scoped lang="scss">
  .threeJS {
    height: 500px;
  }
</style>
